<template>
  <div id="locoMotMachineryMg">
    <el-tabs
      class="locoMotMachineryMgtabs"
      v-model="category"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="轨道车"
        name="0"
      ></el-tab-pane>
      <el-tab-pane
        label="机械设备"
        name="1"
      ></el-tab-pane>
      <el-button
        class="locoMotMachineryMgtabsAdd"
        type="primary"
        @click="addHandler"
        >新增</el-button
      >
    </el-tabs>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
        height="320"
      >
        <el-table-column
          prop="projectName"
          label="所属项目"
          align="center"
        />
        <el-table-column
          prop="deviceType"
          label="设备类型"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备名称"
          align="center"
        />
        <el-table-column
          prop="tried"
          label="防疲劳"
          align="center"
        >
          <template slot-scope="scope">
            <span
              style="color: #67c23a"
              v-if="scope.row.tried === 1"
              >启用</span
            >
            <span
              style="color: #909399"
              v-else
              >未启用</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="track"
          label="股道"
          align="center"
          width="80"
        />
        <el-table-column
          prop="speedFactor"
          label="速度系数"
          align="center"
        >
          <template slot-scope="scope">
            <span
              >{{
                scope.row.speedFactor === null ? '--' : scope.row.speedFactor
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="coupled"
          label="连载挂机"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.coupled === null ? '--' : scope.row.coupled }}
          </template>
        </el-table-column>
        <el-table-column
          prop="posit"
          label="位置"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              `DK ${
                scope.row.positionKm === null ? '--' : scope.row.positionKm
              } + ${scope.row.positionM === null ? '--' : scope.row.positionM}`
            }}</span>
          </template> </el-table-column
        >>
        <el-table-column
          prop="latitudeLongitude"
          label="经纬度"
          align="center"
        >
          <template slot-scope="scope">
            <span
              >经度：
              {{
                scope.row.longitude === null ? '--' : scope.row.longitude
              }}</span
            >
            <br />
            <span
              >纬度：
              {{
                scope.row.latitude === null ? '--' : scope.row.latitude
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          prop="iconPath"
          label="机车图片"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="scope.row.iconPath === null"
              style="font-size: 0.8rem; color: rgb(194, 194, 194)"
            >
              暂无机车图片
            </div>
            <img
              v-else
              :src="scope.row.iconPath"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="lastOnlineTime"
          label="最后在线"
          align="center"
        >
          <template slot-scope="scope">
            <span
              style="color: #e6a23c79"
              v-if="scope.row.lastOnlineTime === null"
              >未获取到最后在线时间</span
            >
            <span v-else>{{ scope.row.lastOnlineTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <span
              style="color: #67c23a"
              v-if="scope.row.status"
              >正常</span
            >
            <span
              v-else
              style="color: #f56c6c"
              >停用</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.status"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.status"
              style="color: #f56c6c"
              @click="deleteHandler(scope.row)"
              >停用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-table
        :data="renderData2"
        border
        style="width: 100%; margin-top: 25px"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          prop="deviceType"
          label="老款轨道车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType1" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="老款东风车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType2" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="老款铺轨车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType3" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="捣固车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType4" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="配砟车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType5" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="牵引车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType6" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="铺轨推送车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType7" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="移动焊轨车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType8" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="架桥车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType9" />
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-table
        :data="renderData2"
        border
        style="width: 100%; margin-top: 25px"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          prop="deviceType"
          label="大铁轨道机"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType10" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="轨道车类型1"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType11" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="轨道车类型2"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType12" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="轨道车类型3"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType13" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="运梁车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType14" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="布料车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType15" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="接触网梯车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType16" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="平板车"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType17" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="提梁机"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType18" />
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceType"
          label="轮胎式运梁机"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.TrainType19" />
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <!-- 编辑 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="editTiele"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
    >
      <el-form
        :model="editFrom"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          style="margin-top: 20px"
          label="所属项目:"
          prop="projectId"
        >
          <el-select
            class="pSelect"
            v-model="editFrom.projectId"
            placeholder="请选择"
            style="width: 80%; display: inline-block"
            disabled
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item style="margin-top: 20px" label="机车类型:" prop="companyCode">
          <el-select
            class="pSelect"
            v-model="editFrom.category"
            placeholder="请选择"
            style="width: 80%; display: inline-block"
          >
            <el-option label="轨道车" :value="0"> </el-option>
            <el-option label="机械设备" :value="1"> </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item
          style="margin-top: 20px"
          label="所在线别:"
          prop="lineType"
        >
          <el-select
            class="pSelect"
            v-model="editFrom.lineType"
            placeholder="请选择"
            style="width: 80%; display: inline-block"
          >
            <el-option
              v-for="item in commonData[0].options"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          style="margin-top: 20px"
          label="设备类型:"
          prop="deviceType"
        >
          <el-select
            class="pSelect"
            v-model="editFrom.deviceType"
            placeholder="请选择"
            style="width: 80%; display: inline-block"
          >
            <el-option
              v-for="item in locomotiveList"
              :key="item.id"
              :label="item.deviceType"
              :value="item.deviceType"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="设备名称:"
          prop="deviceName"
        >
          <el-input
            placeholder="设备名称"
            v-model="editFrom.deviceName"
            style="width: 90%; display: inline-block"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="DK:"
          prop="positionKm"
        >
          <el-row
            type="flex"
            justify="start"
            class="mgb-10"
          >
            <el-col :span="10">
              <el-input
                placeholder="千米"
                v-model.number="editFrom.positionKm"
                style="display: inline-block"
              >
              </el-input
            ></el-col>
            <el-col :span="2"
              ><div
                class="pDiv"
                style="padding: 0"
              >
                +
              </div></el-col
            >
            <el-col :span="10">
              <el-form-item prop="positionM">
                <el-input
                  placeholder="米"
                  v-model.number="editFrom.positionM"
                  style="display: inline-block"
                >
                </el-input> </el-form-item
            ></el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="防疲劳:"
          prop="category"
        >
          <el-select
            class="pSelect"
            v-model="editFrom.tried"
            placeholder="请选择"
            style="width: 80%; display: inline-block"
          >
            <el-option
              label="启用"
              :value="1"
            >
            </el-option>
            <el-option
              label="未启用"
              :value="0"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="股道:"
          prop="track"
        >
          <el-input
            v-model.number="editFrom.track"
            placeholder="股道"
            style="width: 90%; display: inline-block"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="速度系数:"
          prop="speedFactor"
        >
          <el-input
            v-model.number="editFrom.speedFactor"
            placeholder="速度系数"
            style="width: 90%; display: inline-block"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="连载挂机:"
          prop="coupled"
        >
          <el-input
            placeholder="连载挂机"
            v-model="editFrom.coupled"
            style="width: 90%; display: inline-block"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSaveHandler('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLocomotive,
  locomotiveDetail,
  addLocomotive,
  updateLocomotive,
  deleteLocomotive,
  getList,
} from '../../../../http/productSchedule/locoMotMachineryMg.js'
import { getImage } from '../../../../http/productSchedule/userMg.js'
import { blobToBase64 } from '../../../../utils/autoClick.js'
import { getAllProjectList } from '../../../../http/productSchedule/projectMg.js'
import { getDataType } from '../../../../http/productSchedule/dictionary.js'
export default {
  data() {
    return {
      dialogVisible: false,
      btnColor0: 'primary',
      btnColor1: 'info',
      category: '0',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
      imageUrl: '',
      // edit
      editTiele: '',
      editDialogStatus: false,
      commonData: [
        { type: 'ht_line_type', options: [] },
        { type: 'ht_device_type', options: [] },
      ],
      locomotiveList: [],
      projectOptions: [],
      editFrom: {
        tried: 0,
        projectId: null,
        lineType: '',
        deviceType: '',
        deviceName: '',
        speedFactor: 1,
        coupled: '',
        positionKm: null,
        positionM: null,
        track: 0,
      },
      renderData2: [
        {
          TrainType1: require('./TrainType/TrainType1.png'),
          TrainType2: require('./TrainType/TrainType2.png'),
          TrainType3: require('./TrainType/TrainType3.png'),
          TrainType4: require('./TrainType/TrainType4.png'),
          TrainType5: require('./TrainType/TrainType5.png'),
          TrainType6: require('./TrainType/TrainType6.png'),
          TrainType7: require('./TrainType/TrainType7.png'),
          TrainType8: require('./TrainType/TrainType8.png'),
          TrainType9: require('./TrainType/TrainType9.png'),
          TrainType10: require('./TrainType/TrainType10.png'),
          TrainType11: require('./TrainType/TrainType11.png'),
          TrainType12: require('./TrainType/TrainType12.png'),
          TrainType13: require('./TrainType/TrainType13.png'),
          TrainType14: require('./TrainType/TrainType14.png'),
          TrainType15: require('./TrainType/TrainType15.png'),
          TrainType16: require('./TrainType/TrainType16.png'),
          TrainType17: require('./TrainType/TrainType17.png'),
          TrainType18: require('./TrainType/TrainType18.png'),
          TrainType19: require('./TrainType/TrainType19.png'),
        },
      ],
      rules: {
        projectId: [
          { required: true, message: '请选择所属项目', trigger: 'blur' },
        ],
        lineType: [
          { required: true, message: '请选择所属线别', trigger: 'blur' },
        ],
        deviceName: [
          { required: true, message: '请填写设备名称', trigger: 'blur' },
        ],
        deviceType: [
          { required: true, message: '请选择设备类别', trigger: 'blur' },
        ],
        category: [
          { required: true, message: '请选择防疲劳', trigger: 'blur' },
        ],
        positionKm: [
          { required: true, message: '请输入DK千米', trigger: 'blur' },
          { type: 'number', message: 'DK值必须为数字值' },
        ],
        positionM: [
          { required: true, message: '请输入DK米', trigger: 'blur' },
          { type: 'number', message: 'DK值必须为数字值' },
        ],
        track: [
          { required: true, message: '请输入股道', trigger: 'blur' },
          { type: 'number', message: '股道必须为数字值' },
        ],
        speedFactor: [
          { required: true, message: '请输入速度系数', trigger: 'blur' },
          { type: 'number', message: '速度系数必须为数字值' },
        ],
      },
    }
  },

  mounted() {
    // this.renderPage()
    this.getLocomotiveApi()
    this.getAllProjectListApi()
    this.getDataTypeApi()
  },

  methods: {
    // 搜索
    searchHandler() {
      if (
        (this.reportTime === '') &
        (this.processTime === '') &
        (this.hiddenDangerType === '')
      ) {
        this.$message({
          message: '请输入查询条件',
          type: 'warning',
        })
      }
      this.renderData = this.tableData.filter((el) => {
        return el.hiddenDangerCategory === this.hiddenDangerCategory
      })
      this.total = this.renderData.length
    },
    // 重置
    resetHandler() {
      this.getLocomotiveApi()
    },
    // 新增
    addHandler() {
      this.editTiele = '新增'
      this.editDialogStatus = true
      this.editFrom = {
        category: 0,
        projectId: this.projectOptions[0].id,
        lineType: '',
        deviceType: '',
        deviceName: '',
        speedFactor: 1,
        coupled: '',
        positionKm: null,
        positionM: null,
        track: 0,
        tried: 0,
      }
      console.log(this.editFrom)
    },
    //   编辑
    editHandler(v) {
      this.editTiele = '编辑'
      this.editDialogStatus = true
      this.editFrom = JSON.parse(JSON.stringify(v))
    },
    // 删除
    deleteHandler(v) {
      this.$confirm('此操作将停用该设备?', '提示', {
        confirmButtonText: '确定停用',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteLocomotiveApi(v).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '停用成功!',
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消停用',
          })
        })
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getLocomotiveApi(1, v)
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v
      this.getLocomotiveApi(v, this.pageSize)
    },
    saveHandler() {
      this.dialogVisible = false
      let id = Number(sessionStorage.getItem('id'))
      let imgUrl = sessionStorage.getItem('imgUrl')
      this.tableData.filter((el) => {
        return el.id === id
      })[0].signSeal = imgUrl
    },
    // editDialog保存
    editSaveHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editDialogStatus = false
          this.editFrom.positionKm = Number(this.editFrom.positionKm)
          this.editFrom.positionM = Number(this.editFrom.positionM)
          this.editFrom.speedFactor = Number(this.editFrom.speedFactor)
          this.editFrom.coupled = Number(this.editFrom.coupled)
          this.editFrom.track = Number(this.editFrom.track)
          let params = this.editFrom
          this.locomotiveList.forEach((item) => {
            if (item.deviceType === this.editFrom.deviceType) {
              this.editFrom.category = item.category
              this.editFrom.iconPath = item.iconPath
            }
          })
          // deviceType

          if (this.editTiele == '新增') {
            this.$confirm('确认新增此条信息?', '提示', {
              confirmButtonText: '确定新增',
              cancelButtonText: '取消',
              type: 'info',
            })
              .then(() => {
                this.addLocomotiveApi(params)
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消新增',
                })
              })
          } else {
            // params.id = this.companyId;
            this.$confirm('确认编辑此条信息?', '提示', {
              confirmButtonText: '确定编辑',
              cancelButtonText: '取消',
              type: 'info',
            })
              .then(() => {
                this.updateLocomotiveApi(params)
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消编辑',
                })
              })
          }
          this.editDialogStatus = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 接口
     */
    // 查询所有项目
    getAllProjectListApi() {
      getAllProjectList().then((res) => {
        if (res.code == 200) {
          this.projectOptions = res.data
          this.editFrom.projectId = res.data[0].id
        }
      })
    },
    // 查询所有线别/设备类型
    getDataTypeApi() {
      for (let i = 0; i < this.commonData.length; i++) {
        getDataType({ type: this.commonData[i].type }).then((res) => {
          if (res.code == 200) {
            this.commonData[i].options = res.data
          }
        })
      }
      console.log('this.commonData::: ', this.commonData)
      getList().then((res) => {
        if (res.code == 200) {
          this.locomotiveList = res.data
          console.log(this.locomotiveList)
        }
      })
    },
    // 分页查询机械及查询
    getLocomotiveApi(pageNum = 1, pageSize = 10, category = 0) {
      if (category === 0) {
        this.btnColor0 = 'primary'
        this.btnColor1 = 'info'
      } else {
        this.btnColor0 = 'info'
        this.btnColor1 = 'primary'
      }
      let params = { pageNum, pageSize, category }
      getLocomotive(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
          for (let i = 0; i < this.renderData.length; i++) {
            if (this.renderData[i].iconPath == null) {
              this.renderData[i].iconPath = null
            } else {
              getImage({ path: this.renderData[i].iconPath }).then((resImg) => {
                blobToBase64(resImg).then((resBase64) => {
                  this.renderData[i].iconPath = resBase64
                })
              })
            }
          }
        }
      })
    },
    // id查询机械
    locomotiveDetailApi(params) {
      locomotiveDetail(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
        }
      })
    },
    // 保存机车
    addLocomotiveApi(params) {
      addLocomotive(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('添加成功')
          let pgn =
            Number.isInteger(this.total / this.pageSize) == true
              ? this.total / this.pageSize + 1
              : Math.ceil(this.total / this.pageSize)
          console.log('pgn::: ', this.total, this.pageSize, pgn)
          this.getLocomotiveApi(pgn, this.pageSize, this.category)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 编辑机车
    updateLocomotiveApi(params) {
      updateLocomotive(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑成功')
          this.getLocomotiveApi(this.currentPage, this.pageSize, this.category)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 删除机车
    deleteLocomotiveApi(params) {
      deleteLocomotive(params).then((res) => {
        if (res.code == 200) {
          if (this.total % this.pageSize == 1) {
            this.currentPage = this.currentPage - 1
            this.getLocomotiveApi(
              this.currentPage,
              this.pageSize,
              this.category
            )
          } else {
            this.getLocomotiveApi(
              this.currentPage,
              this.pageSize,
              this.category
            )
          }
        }
      })
    },
    //tab切换
    handleClick(tab) {
      this.getLocomotiveApi(1, 10, tab.name)
    },
  },
}
</script>

<style lang="less" scoped>
#locoMotMachineryMg {
  :deep(.el-tabs__content) {
    overflow: inherit;
  }
  :deep(.el-dialog) {
    margin-top: 8vh !important;
  }
  .locoMotMachineryMgtabs {
    position: relative;
    .locoMotMachineryMgtabsAdd {
      position: absolute;
      top: -60px;
      right: 0px;
    }
  }
}
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}
</style>
